<template>
	<view>
		<pageHeader   @back='back' :fixed='true' >
			<view class="pageTitle">
				<text @tap='toChooseType'>{{type=='comment'?'评论':type=='follow'?'关注我的':type=='praise'?'点赞':''}}</text>
				<image src="/static/svg/messageBoxXL.svg" mode="" @tap='toChooseType'></image>
			</view>
		</pageHeader>
		<view style="height: 90rpx;"></view>
		<view class="title_Bar">
			<view :class="{title_active:title_active==0}" @tap='toChooseTitleBar($event,0)'>
				<text>居家艺术</text>
			</view>
			<view :class="{title_active:title_active==1}" @tap='toChooseTitleBar($event,1)'>
				<text>佛堂</text>
			</view>
		</view>
		<view class="chooseType" v-show="chooseType" @touchmove.stop.prevent="chooseType = false" @tap.stop.prevent="chooseType = false">
			<view class="chooseType_body">
				<image src="/static/img/chooseType.png"></image>
				<view class="chooseType_body_word">
					<text @tap.stop="toChooseTheType($event,'follow')">关注我的</text>
					<text @tap.stop="toChooseTheType($event,'praise')">点赞</text>
					<text @tap.stop="toChooseTheType($event,'comment')">评论</text>
				</view>
			</view>
		</view>
		<template v-if="type=='follow'">
			<view class="followBody">
				<image src="/static/img/20200210110217.jpg" mode=""></image>
				<view class="followBody_middle">
					<text>居家达人</text>
					<text>关注了你</text>
					<text>2020-01-16 11:22</text>
				</view>
				<view class="followBody_button">
					<image src="/static/svg/addGuan.svg" mode=""></image>
					<text>关注</text>
				</view>
			</view>
			<view class="followBody">
				<image src="/static/img/20200210110217.jpg" mode=""></image>
				<view class="followBody_middle">
					<text>居家达人10</text>
					<text>关注了你</text>
					<text>2020-01-16 11:22</text>
				</view>
				<view class="followBody_button followBody_button_is">
					<text>取消关注</text>
				</view>
			</view>
			<view style="height: 30rpx;"></view>
		</template>
		<view class="system" :style="{minHeight:height+'px'}" v-if="type=='comment'||type=='praise'">
			<template v-if="type=='praise'">
				<view class="systemTitle">
					<text>最新消息</text>
				</view>
				<view class="systemBody">
					<view class="systemBody_auther">
						<image src="/static/img/20200210110217.jpg" mode=""></image>
						<view >
							<text>居家达人</text>
							<text>2020-01-16 11:22</text>
						</view>
					</view>
					<text class="systemBody_desc">点赞了这条设计作品</text>
					<view class="systemBody_body">
						<text class="systemBody_body_content">小黄鸭：这个搭配太好看了吧德哈卡计划的空间哈卡接电话爱空间和的卡机空间都好看均获得卡号考得好可计划的空间安徽科技和贷款计划等哈卡接电话按计划大家啊哈贷款计划氨基酸肯定会案件开始好！！</text>
						<view>
							<image src="/static/img/20200210110217.jpg" mode="aspectFill"></image>
							<text class="two_ellipsis">居家经验图文鉴赏，欢迎大家来评论点赞，好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔！</text>
						</view>
					</view>
				</view>
				<view class="systemTitle">
					<text>更早的消息</text>
				</view>
				<view class="systemBody">
					<view class="systemBody_auther">
						<image src="/static/img/20200210110217.jpg" mode=""></image>
						<view >
							<text>居家达人</text>
							<text>2020-01-16 11:22</text>
						</view>
					</view>
					<text class="systemBody_desc">点赞了这条设计作品</text>
					<view class="systemBody_body">
						<view>
							<image src="/static/img/20200210110217.jpg" mode="aspectFill"></image>
							<text class="two_ellipsis">居家经验图文鉴赏，欢迎大家来评论点赞，好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔！</text>
						</view>
					</view>
				</view>
			</template>
			<template v-if="type=='comment'">
				<view class="systemTitle">
					<text>最新消息</text>
				</view>
				<view class="systemBody">
					<view class="systemBody_auther">
						<image src="/static/img/20200210110217.jpg" mode=""></image>
						<view >
							<text>居家达人</text>
							<text>2020-01-16 11:22</text>
						</view>
					</view>
					<text class="systemBody_desc">这个搭配太好看了吧好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔！！</text>
					<view class="systemBody_body">
						<view>
							<image src="/static/img/20200210110217.jpg" mode="aspectFill"></image>
							<text class="two_ellipsis">居家经验图文鉴赏，欢迎大家来评论点赞，好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔！</text>
						</view>
					</view>
				</view>
				<view class="systemTitle">
					<text>更早的消息</text>
				</view>
				<view class="systemBody">
					<view class="systemBody_auther">
						<image src="/static/img/20200210110217.jpg" mode=""></image>
						<view >
							<text>居家达人</text>
							<text>2020-01-16 11:22</text>
						</view>
					</view>
					<text class="systemBody_desc">这个搭配太好看了吧好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔！！</text>
					<view class="systemBody_body">
						<view>
							<image src="/static/img/20200210110217.jpg" mode="aspectFill"></image>
							<text class="two_ellipsis">居家经验图文鉴赏，欢迎大家来评论点赞，好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔！</text>
						</view>
					</view>
				</view>
				<view class="systemBody">
					<view class="systemBody_auther">
						<image src="/static/img/20200210110217.jpg" mode=""></image>
						<view >
							<text>居家达人</text>
							<text>2020-01-16 11:22</text>
						</view>
					</view>
					<text class="systemBody_desc">这个搭配太好看了吧好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔！！</text>
					<view class="systemBody_body">
						<view>
							<image src="/static/img/20200210110217.jpg" mode="aspectFill"></image>
							<text class="two_ellipsis">居家经验图文鉴赏，欢迎大家来评论点赞，好的项目可以找卡口登记卡肯定会尽快阿合适的健康安徽省科技和都看见爱上和大家看黑科技回家我喔！</text>
						</view>
					</view>
				</view>
			</template>
			<view style="height: 30rpx;"></view>
		</view>	
	</view>
</template>

<script>
	import pageHeader from "@/components/header/header.vue"
	export default {
		components: {pageHeader},
		data() {
			return {
				type:"",
				title_active:0,
				chooseType:false,
				height:0
			};
		},
		onLoad(e) {
			this.height=uni.getSystemInfoSync().windowHeight-((88+90)/750)*uni.getSystemInfoSync().windowWidth
			if(e.type){
				this.type=e.type
			}
		},
		methods:{
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toChooseType(){
				this.chooseType=true
			},
			toChooseTheType(e,type){
				this.chooseType=false
				if(this.type!=type){
					this.type=type
				}
			},
			toChooseTitleBar(e,index){
				if(this.title_active!=index){
					this.title_active=index
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #FFFFFF;
}
.pageTitle{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	text{
		font-size: 36rpx;
		line-height: 36rpx;
		color: #333333;
		letter-spacing: 1rpx;
	}
	image{
		height: 38rpx;
		width: 38rpx;
		margin-left: 7rpx;
	}
}
.title_Bar{
	display: flex;
	width: 750rpx;
	border-bottom: 1rpx solid #EEEEEE;
	position: fixed;
	top: 88rpx;
	left: 0;
	height: 90rpx;
	z-index: 10;
	background-color: #FFFFFF;
	view{
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90rpx;
		text{
			color:#AEA8A2 ;
			font-size: 28rpx;
			line-height: 90rpx;
			letter-spacing: 1rpx;
		}
	}
	.title_active{
		text{
			color: #333333;
			font-size: 34rpx;
			line-height: 90rpx;
			font-weight: bold;
			position: relative;
		}
		text::after{
			content: "";
			display: block;
			height:6rpx ;
			width: 34rpx;
			background-color:#333333 ;
			border-radius: 5rpx;
			bottom: 0;
			position: absolute;
			left: 0;
		}
	}
}
.followBody{
	display: flex;
	height:196rpx ;
	border-bottom: 1rpx solid #EEEEEE;
	padding-top: 30rpx;
	position: relative;
	image{
		height: 86rpx;
		width: 86rpx;
		border-radius: 50%;
		margin-left: 30rpx;
	}
	.followBody_middle{
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		height: 136rpx;
		margin-left: 20rpx;
		text{
			letter-spacing: 1rpx;
		}
		text:first-of-type{
			color: #333333;
			font-weight: bold;
			font-size: 34rpx;
			line-height: 34rpx;
		}
		text:nth-of-type(2){
			font-size:32rpx ;
			line-height: 32rpx;
			color: #666666;
		}
		text:nth-of-type(3){
			font-size:28rpx ;
			line-height: 28rpx;
			color: #999999;
		}
	}
	.followBody_button{
		height:48rpx ;
		width: 136rpx;
		border-radius: 26rpx;
		border: 1rpx solid #C84739;
		display: flex;
		align-items: center;
		position: absolute;
		right: 30rpx;
		top: 50rpx;
		image{
			border-radius: unset;
			height: 20rpx;
			width: 20rpx;
			margin-left: 23rpx;
		}
		text{
			color:#C84739 ;
			font-size: 28rpx;
			line-height: 28rpx;
			margin-left:11rpx ;
		}
	}
	.followBody_button_is{
		border-color: #CCCCCC;
		justify-content: center;
		width: unset;
		text{
			color: #999999;
			margin: 0;
			padding: 0 22rpx;
		}
	}
}
.chooseType{
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 999;
	top: 0;
	left: 0;
	background-color: transparent;
	.chooseType_body{
		height:347rpx ;
		width: 339rpx;
		position: absolute;
		top:70rpx;
		left: 205rpx;
		background-color: transparent;
		display: flex;
		flex-flow: column;
		justify-content: flex-end;
		align-items: center;
		image{
			position: absolute;
			height: 100%;
			width: 100%;
			top:0;
			left: 0;
			z-index: 1;
		}
		.chooseType_body_word{
			position: relative;
			z-index: 2;
			width: 309rpx;
			border-radius: 4rpx;
			padding-bottom: 67rpx;
			background-color: transparent;
			display: flex;
			flex-flow: column;
			justify-content: flex-end;
			align-items: center;
			text{
				font-size: 36rpx;
				color: #333333;
				line-height: 36rpx;
				letter-spacing: 1rpx;
				margin-top: 50rpx;
			}
		}
	}
}
.system{
	background-color:#F5F5F5 ;
	.systemTitle{
		height: 90rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		text{
			font-size: 30rpx;
			line-height: 30rpx;
			color:#333333 ;
			letter-spacing: 1rpx;
		}
	}
	.systemBody{
		background-color:#FFFFFF ;
		padding: 30rpx 47rpx 30rpx 31rpx;
		border-bottom: 1rpx solid #ddd;
		.systemBody_auther{
			display: flex;
			image{
				height: 86rpx;
				width: 86rpx;
				border-radius: 50%;
			}
			view{
				margin-left: 20rpx;
				height: 86rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				text:first-of-type{
					color:#333333 ;
					font-weight: bold;
					font-size: 34rpx;
					line-height: 34rpx;
					letter-spacing: 1rpx;
				}
				text:nth-of-type(2){
					font-size:28rpx ;
					line-height: 28rpx;
					color: #999999;
					letter-spacing: 1rpx;
					
				}
			}
		}
		.systemBody_desc{
			display: block;
			font-size: 26rpx;
			letter-spacing: 1rpx;
			color:#333333 ;
			line-height: 38rpx;
			margin-top: 24rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			text-align: justify;
		}
		.systemBody_body{
			margin-top: 24rpx;
			padding: 20rpx;
			background-color:#F5F5F5;
			.systemBody_body_content{
				display: block;
				font-size:26rpx ;
				line-height: 38rpx;
				margin-top: -6rpx;
				margin-bottom: 14rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				text-align: justify;
			}
			view{
				display: flex;
				align-items: center;
				image{
					height: 86rpx;
					width: 116rpx
				}
				text{
					font-size:26rpx ;
					line-height: 38rpx;
					text-align: justify;
					width: 496rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
	
}
</style>
